import React, { useState } from 'react';
// render-props的children使用
function Mouse({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {/* 调用 children 函数并传递当前的状态 */}
      {children(position)}
    </div>
  );
}

// 使用时
function App() {
  return (
    <Mouse>
      {({ x, y }) => (
        <h1>The mouse position is ({x}, {y})</h1>
      )}
    </Mouse>
  );
}

export default App;




// render模式
// import React, { useState } from 'react';

// function Mouse({ render }) {
//   const [position, setPosition] = useState({ x: 0, y: 0 });

//   const handleMouseMove = (event) => {
//     setPosition({
//       x: event.clientX,
//       y: event.clientY,
//     });
//   };

//   return (
//     <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
//       {render(position)}
//     </div>
//   );
// }

// // 使用时
// function App() {
//   return (
//     <Mouse render={({ x, y }) => (
//       <h1>The mouse position is ({x}, {y})</h1>
//     )} />
//   );
// }

// export default App;
